<template>
  <div class="convenience-service">
    <div class="title">2025年累计服务群众：</div>
    <div class="value-block">
      <div class="value">1</div>
      <div class="value">4</div>
      <div class="text">，</div>
      <div class="value">8</div>
      <div class="value">2</div>
      <div class="value">6</div>
      <div class="text">人次</div>
    </div>
    <div class="title">：群众满意度</div>
    <div class="value-block">
      <div class="value">9</div>
      <div class="value">9</div>
      <div class="text">·</div>
      <div class="value">5</div>
      <div class="text">%</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ConvenienceService"
}
</script>
<style scoped lang="scss">
.convenience-service{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .title{
    margin-bottom: 15px;
    &:nth-child(1){
      color: $fontColorMain;
    }
    &:nth-child(3){
      color: $fontColorYellow;
    }
  }
  .value-block{
    display: flex;
    align-items: flex-end;
    font-family: 冷酷体;
    font-weight: bold;
    font-size: 40px;
    .value{
      padding: 10px 10px;
      border: 1px solid;
      border-radius: 8px;
      margin: 0 10px;
    }
    &:nth-child(2){
      color: $fontColorMain;
      margin-bottom: 30px;
      .value{
        border-color: $fontColorMain;
      }
    }
    &:nth-child(4){
      color: $fontColorYellow;
      .value{
        border-color: $fontColorYellow;
      }
    }
  }
}
</style>
